<template>
    <div>
        <div class="form_wrap" v-for="(Info,index) in moduleData" :key="index">
            <p class="basic_title">{{Info.group}}</p> 
            <div class="form_content">
                <el-form-item :label="`${item.label}：`" v-for="item in Info.data" :key="item.value" :prop="item.fieldrequire === 1 ? item.value : null" :rules="item.fieldrequire === 1 ? [{ required: true, message: `${item.label}不能为空` }] : null" style="width: 40%">
                    <el-input v-model="formData[item.value]" v-if="item.type == 'text'" style="width:218px;" :disabled="item.disabled" @change="changeFormData"></el-input>
                    <el-input type="textarea" :autosize="{ maxRows: 2}" v-model="formData[item.value]" v-if="item.type == 'textarea'" style="width:218px;" :disabled="item.disabled" @change="changeFormData"></el-input>
                    <el-radio-group v-model="formData[item.value]" v-if="item.type == 'radio'" @change="changeFormData" style="width:218px;">
                        <el-radio  v-for="(it,i) in item.typeValue" :key="i" :label="it.value">{{it.label}}</el-radio>
                    </el-radio-group>
                    <el-checkbox-group v-model="formData[item.value]" v-if="item.type == 'checkboxarray'" @change="changeFormData" style="width:218px;"> 
                        <el-checkbox  v-for="(it,i) in item.typeValue" :key="i" :label="it.value"  >{{it.label}}</el-checkbox>
                    </el-checkbox-group>
                    <el-select v-model="formData[item.value]" filterable clearable v-if="item.type == 'select'" :disabled="item.disabled" @change="changeFormData">
                        <el-option
                            v-for="it in item.typeValue"
                            :key="it.value"
                            :label="it.label"
                            :value="it.value">
                        </el-option>
                    </el-select>
                    <el-date-picker v-model="formData[item.value]" type="date" placeholder="选择日期" v-if="item.type == 'date'" :disabled="item.disabled" style="width:218px;" @change="changeFormData"></el-date-picker>
                    <el-time-picker v-model="formData[item.value]" placeholder="选择时间" v-if="item.type == 'time'" :disabled="item.disabled" style="width:218px;" @change="changeFormData"></el-time-picker>
                    <el-date-picker v-model="formData[item.value]" type="datetime" placeholder="选择日期时间" v-if="item.type == 'datetime'" :disabled="item.disabled" style="width:218px;" @change="changeFormData"></el-date-picker>
                </el-form-item>
            </div>
            <!-- <div class="form_content" v-if="pageType === 'details'">
                <el-form-item :label="`${item.label}：`" v-for="item in Info.data" :key="item.value">
                    <li>{{formData[item.value]}}</li>
                </el-form-item>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
  name: "CountTo",
  props:{
    moduleData:{
      type: Array,
      default: []
    },
    formData: {
        type: Object,
        default: {}
    }
  },
  data() {
    return {
      
    };
  },
  methods: {
      changeFormData(){
          this.$emit('changeFormData',{...this.formData})
      }
  },
  mounted() {
    
  },
};
</script>
<style lang="scss" scoped>
    .basic_title {
        width: 100%;
        line-height: 41px;
        background: #F5F5F5;
        padding-left: 24px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }
    // .basic_content {
    //     padding: 40px 0 44px 24px;
    //     display: flex;
    //     flex-wrap: wrap;
    //     div {
    //         width: 25%;
    //     }
    // }
    .form_wrap{
        margin-bottom: 10px;
        h4{
            margin: 10px 0px;
        }
        hr{
            margin-bottom: 10px;
        }
        .form_content{
            padding: 40px 0 44px 24px;
            padding-top: 40px;
            display: flex;
            flex-wrap: wrap;
            /deep/ .el-form-item {
                width: 25%;
                font-weight: 600;
            }
        }
    }
</style>